<template>
	<div ref="chartRef" class="chart-container"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

interface Props {
	chartData: any[];
	categoryName: string;
}

const props = defineProps<Props>();
const chartRef = ref<HTMLElement>();
let chart: echarts.ECharts | null = null;

const renderChart = () => {
	if (!chartRef.value || !props.chartData || props.chartData.length === 0) return;

	// 获取今天的日期
	const today = new Date();
	const todayStr = today.toISOString().slice(0, 10);

	// 过滤数据：实际数据只显示到今天的累计数据
	const filteredData = props.chartData.map((item) => {
		const isTodayOrBefore = item.date <= todayStr;
		return {
			...item,
			// 实际数据只显示到今天的累计值，今日之后设为null让折线断开
			actualStart: isTodayOrBefore ? item.actualStart : null,
			actualEnd: isTodayOrBefore ? item.actualEnd : null,
			// 计划数据保持原样
			planStart: item.planStart,
			planEnd: item.planEnd
		};
	});

	// 格式化日期为 MM-DD
	const days = filteredData.map((d: any) => {
		const date = new Date(d.date);
		const mm = String(date.getMonth() + 1).padStart(2, '0');
		const dd = String(date.getDate()).padStart(2, '0');
		return `${mm}-${dd}`;
	});
	
	const planEnd = filteredData.map((d: any) => d.planEnd || 0);
	const actualEnd = filteredData.map((d: any) => d.actualEnd || 0);

	if (chart) chart.dispose();

	chart = echarts.init(chartRef.value);
	chart.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'cross' }
		},
		legend: {
			data: ['计划完工(柱)', '计划完工(线)', '实际完工(柱)', '实际完工(线)'],
			bottom: 5,
			textStyle: { fontSize: 12 }
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '15%',
			top: '10%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: days,
			axisLabel: { fontSize: 10, rotate: 45 }
		},
		yAxis: {
			type: 'value',
			axisLabel: { fontSize: 10 }
		},
		series: [
			{
				name: '计划完工(柱)',
				type: 'bar',
				data: planEnd,
				itemStyle: { color: '#5470c6' },
				barWidth: '60%',
				label: {
					show: true,
					position: 'top',
					fontSize: 10,
					color: '#333',
					fontWeight: 'bold'
				}
			},
			{
				name: '计划完工(线)',
				type: 'line',
				data: planEnd,
				itemStyle: { color: '#5470c6' },
				lineStyle: { width: 2 },
				symbol: 'circle',
				symbolSize: 4,
				label: {
					show: false
				}
			},
			{
				name: '实际完工(柱)',
				type: 'bar',
				data: actualEnd,
				itemStyle: { color: '#91cc75' },
				barWidth: '60%',
				label: {
					show: true,
					position: 'insideBottom',
					distance: 5,
					fontSize: 10,
					color: '#000',
					fontWeight: 'bold',
					borderRadius: 4,
					formatter: function (v: any) {
						return v.value === 0 ? '' : String(v.value);
					}
				}
			},
			{
				name: '实际完工(线)',
				type: 'line',
				data: actualEnd,
				itemStyle: { color: '#91cc75' },
				lineStyle: { width: 2 },
				symbol: 'circle',
				symbolSize: 4,
				label: {
					show: false
				},
				connectNulls: false
			}
		]
	});
	chart.resize();
};

const handleResize = () => {
	if (chart) {
		chart.resize();
	}
};

// 暴露resize方法给父组件
const resize = () => {
	handleResize();
};

onMounted(() => {
	nextTick(() => {
		renderChart();
		window.addEventListener('resize', handleResize);
	});
});

onBeforeUnmount(() => {
	if (chart) {
		chart.dispose();
		chart = null;
	}
	window.removeEventListener('resize', handleResize);
});

watch(() => props.chartData, () => {
	nextTick(() => {
		renderChart();
	});
}, { deep: true });

watch(() => props.categoryName, () => {
	nextTick(() => {
		renderChart();
	});
});

// 暴露方法给父组件
defineExpose({
	resize
});
</script>

<style scoped>
.chart-container {
	width: 100%;
	height: 100%;
}
</style> 